<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gl" lang="gl">

	<head>
		<title>
			cSans - Tooltip demo
		</title>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<meta http-equiv="Content-Language" content="gl" />
		<meta name="author" content="A navalla suíza - http://anavallasuiza.com" /><!-- Cargamos cSans -->
		<link rel="stylesheet" href="../css/csans.css" type="text/css" />
		<link rel="stylesheet" href="../css/csans-grid-950-24-10.css" type="text/css" />
		<link rel="stylesheet" href="../css/csans-modal.css2" type="text/css" />
		<style type="text/css">
			.overlay{
				position: absolute;
				z-index:1001;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: #000;
				opacity:.75;
				-moz-opacity: 0.75;
				filter: alpha(opacity=75);
				}
			.modal {
				position: absolute;
				top: 25%;
				left: 25%;
				width: 50%;
				height: 50%;
				padding: 16px;
				background: #fff;
				color: #333;
				z-index:1002;
				overflow: auto;
				}
		</style>
	</head>

	<body>
		<div class="page">
			<div class="row t4 b8">
				<h1 class="col11 r1">cSans modal demo</h1>
				<p class="col12 t2 last">
					You can create simply modal layers.<br />
					The content layer can have fluid size (25%, 33%, 50% or 66%) or fixed size.<br />
					The modal plugin is compatible with the align plugin
				</p>
			</div>
			
			
		</div>
		<div class="overlay">
				<div class="modal" style="background: #fff">
					<h3>This is the content of the modal</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<p>
				</div>
			</div>
	</body>
</html>